<!--  -->
<template>
   <div class='container'> 
      <div class="titleTop">求助信息详情</div>
      <div>
         <span class="pr20">发布时间：{{ data.startTime }}</span>
         <span class="pr20">结束时间：{{ data.endTime }}</span>
         <span style="color:#777">备注：该日期是以提交了内容的时间为准</span>
      </div>
      <span>订单状态：{{ data.orderState }}</span>
      <span>求助人姓名：{{ data.seekHelpMan }}</span>
      <div>
         <span class="pr20">服务人姓名：{{ data.serviceStaff }}</span>
         <span class="pr20">服务人刷卡时间：{{ data.serviceStaffSlotCardTime }}</span>
      </div>
      <div>
         <span class="pr20">协助人姓名：{{ data.assistant }}</span>
         <span class="pr20">协助人刷卡时间：{{ data.assistantSlotCardTime }}</span>
      </div>
      <span>服务对象：{{ data.serviceObject }}</span>
      <span>服务内容：
         <span style="padding-right:10px" v-for="(content,index) in data.serviceContent" :key="index">{{ content }}</span>
      </span>
      <div>服务前照片：</div>
      <div class="serviceBeforePic pr20 flex">
         <div class="imgBox" v-for="(imgSrc,index1) in data.serviceBeforePic" :key="index1">
            <img :src="imgSrc" alt="">
         </div>
      </div>
      <div>服务后照片：</div>
      <div class="serviceAfterPic pr20 flex">
         <div class="imgBox" v-for="(imgSrc,index2) in data.serviceAfterPic" :key="index2">
            <img :src="imgSrc" alt="">
         </div>
      </div>
   </div>
</template>

<script>
export default {
components: {

},
data() {
   return {
      data:{
         startTime:'2020-10-11 21:25:16',
         endTime:'2020-10-12 21:25:16 ',
         orderState:'完成',
         seekHelpMan:'悟空',
         serviceStaff:'贝吉塔',
         serviceStaffSlotCardTime:'2020-10-11 21:25:16',
         assistant:'布尔玛',
         assistantSlotCardTime:'2020-10-11 21:25:16',
         serviceObject:'短笛',
         serviceContent:['洗脸','洗脚','洗澡'],
         serviceBeforePic:[
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603366975605&di=6defc5aed3a9b7234636cb607000e145&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110109%2F1101091845d3a6a4a1eadc3e1a.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603366975605&di=6defc5aed3a9b7234636cb607000e145&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110109%2F1101091845d3a6a4a1eadc3e1a.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603366975605&di=6defc5aed3a9b7234636cb607000e145&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110109%2F1101091845d3a6a4a1eadc3e1a.jpg',
         ],
         serviceAfterPic:[
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603366975605&di=6defc5aed3a9b7234636cb607000e145&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110109%2F1101091845d3a6a4a1eadc3e1a.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603366975605&di=6defc5aed3a9b7234636cb607000e145&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110109%2F1101091845d3a6a4a1eadc3e1a.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603366975605&di=6defc5aed3a9b7234636cb607000e145&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110109%2F1101091845d3a6a4a1eadc3e1a.jpg',
         ]
      }
   };
},
methods: {

},
computed: {

},
watch: {

},
created() {

},
mounted() {

},
}

</script>
<style lang='scss' scoped>
.container {
   padding: 20px;
   line-height: 32px;
   color: #444;
   .titleTop{
      font-size: 24px;
      color: #666;
      font-weight: 600;
      padding-bottom: 20px;
   }
   .pr20{
      padding-right: 20px;
   }
   .flex{
      display: flex;
   }
   .imgBox{
      width: 100px;
      height: 100px;
      img{
         width: 100%;
         height: 100%;
      }
   }
}
</style>